<template>
    <div id='question'>
        <div class="test_bt" v-if="showTitle">
            <span>{{testData.questionTypes}}({{testData.typesIntro}})</span>
        </div>
        <div id='markarea' class='test_content'>
            <div class='test_num' style="margin-top: 1px;margin-bottom: 1px;"><span style="font-family:黑体;font-size: 14px">
                第 {{testNum+1}} 题&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </div>
            <div class='test_box'>
                <div class='box_title' v-html="testData.data[testNum].title">
                </div>
                <div class='box_content'>
                    <ul  >
                        <li v-for="(item,index) in testData.data[testNum].options" :key='index'>
                            <input v-if="testData.type == '0' || testData.type == '3'" type="radio" :name='item.type+index' :value='item.optionName' :checked='item.check' @click='clickOption(item,index,testData.type)' style='margin-right:10px;'>
                            <input v-if="testData.type == '1' || testData.type == '2'" type="checkbox" name='answer' value='index' :checked='item.check'  @click='clickOption(item,index,testData.type)' style='margin-right:10px;'>
                            <strong style="font-family:宋体" v-if="testData.type != '3'">{{item.optionName}}.</strong>
                            <span v-html='item.content' class='optionContentBox'></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'Question1',
    data(){
        return{
            showTitle:true,
            number:1,
            radioNum:-1,
            panduanNum:-1,
            checkBox:[],
            testData:null
        }
    },
    props:['testNum','data'],
    created(){
        this.testData = this.data
    },
    methods:{
        clickOption(item,index,type){
            let obj = null;
            let answer = {
                answers:[],
                questionId:''
            };
            if(type == '0' || type == '3'){
                obj = this.testData.data[this.testNum];
                obj.options.forEach((val,num)=>{
                    if(num == index){
                        if(val.check) val.check = false;
                        else val.check =true
                    }else{
                        val.check = false
                    }
                })
                this.testData.data.splice(this.testNum,1,obj);
            } else if(type == '1' || type == '2'){
                obj = this.testData.data[this.testNum].options[index];
                obj.check = !obj.check
                this.testData.data[this.testNum].options.splice(index,1,obj);
            }
            this.testData.data[this.testNum].options.forEach((val,i)=>{
                if(val.check){
                    answer.answers.push(val.optionName)
                }
            })
            answer.questionId = this.testData.data[this.testNum].questionId
            if(answer.answers.length > 0) this.$emit('setSign','1');
            else this.$emit('setSign','0');
            this.$emit('getAnswer',answer);
        }
    },
    watch:{
        testNum(val){
            this.radioNum = -1
        },
        data(val){
            this.testData = val
        }
    }
}
</script>

<style lang="scss" scoped>
// @import url('../assets/css/main.css');
#question{
    margin:8px;
    height:100%;
    .test_bt {
        font-weight: normal;
        color: #333333;
        font-size: 12pt;
        line-height: 1.5;
        padding: 5px;
        margin: 0px;
        text-align: left;
        font-family: '黑体';
        span{
            display:inline-block;
            line-height:25pt;
            margin:0 0 0 24pt;
            text-indent:-24pt;
        }
    }
    .test_content{
        line-height: 1.5;
        border-top: 1px solid #9fb7f7;
        padding: 15px 15px 30px 15px;
        text-align:left;
        color:#000;
        .test_num{
            text-align: left;
        }
        .test_box{
            position: relative;
            width: 100%;
            border: 0px solid #000;
            margin: 10px auto;
            overflow: hidden;
            .box_title{
                line-height: 1.5;
                font-family:'宋体'
            }
            .box_content{
                li{
                    .optionContentBox{
                        display: inline-block;
                        vertical-align: text-top;
                        width: 95%;
                        p{
                            display:inline!important;
                        }
                    }
                    .inputBox{
                        width:30px;
                        height:30px;
                        display:inline-block;
                    }
                    span{
                        font-family: '宋体';
                    }
                }
            }
        }
    }
}
</style>
